<template>
  <div class="user-view" v-if="viewLoading">
    <div class="user-view-info">
      <img class="user-container-poster" src="../../assets/images/noface.png">
      <div style="text-align: center;font-size: 0.9rem;">用户名：{{ user.account }}</div>
    </div>

    <div class="van-row user-container-links">      
      <router-link :to="{name:'userWalletTransferLog', params: {'field': 5}}" class="van-col">
        <span>开户票</span>
        <div>{{ userWallet.price_activation }}个</div>
      </router-link>
      <router-link :to="{name:'userWalletTransferLog', params: {'field': 4}}" class="van-col">
        <span>交易票</span>
        <div>{{ userWallet.price_trade }}个</div>
      </router-link>
      <router-link :to="{name:'userWalletLog', params: {'field': 1}}" class="van-col">
        <span>零售积分</span>
        <div>{{ Math.round(userWallet.price_retail,2) }}分</div>
      </router-link>
      <router-link :to="{name:'userWalletLog', params: {'field': 2}}" class="van-col">
        <span>业务积分</span>
        <div>{{ Math.round(userWallet.price_business,2) }}分</div>
      </router-link>
      <router-link :to="{name:'userWalletLog', params: {'field': 3}}" class="van-col">
        <span>商城积分</span>
        <div>{{ Math.round(userWallet.price_shop,2) }}分</div>
      </router-link>
    </div>

    <div class="van-cell-group user-container-group van-hairline--top-bottom">
      <router-link :to="{name:'userInfo'}" class="van-cell van-hairline van-cell--clickable">
        <div class="van-cell__title"><span>个人资料</span></div>
        <i class="van-icon van-cell__right-icon van-icon-arrow"></i>
      </router-link>
    </div>
    <div class="van-cell-group user-container-group van-hairline--top-bottom">
      <router-link :to="{name:'userPassword'}" class="van-cell van-hairline van-cell--clickable">
        <div class="van-cell__title"><span>修改密码</span></div>
        <i class="van-icon van-cell__right-icon van-icon-arrow"></i>
      </router-link>
      <router-link :to="{name:'userSafePassword'}" class="van-cell van-hairline van-cell--clickable">
        <div class="van-cell__title"><span>修改安全密码</span></div>
        <i class="van-icon van-cell__right-icon van-icon-arrow"></i>
      </router-link>
      <router-link :to="{name:'userBankInfo'}" class="van-cell van-hairline van-cell--clickable">
        <div class="van-cell__title"><span>银行信息</span></div>
        <i class="van-icon van-cell__right-icon van-icon-arrow"></i>
      </router-link>

      <router-link :to="{name:'userAddress'}" class="van-cell van-hairline van-cell--clickable">
        <div class="van-cell__title"><span>地址信息</span></div>
        <i class="van-icon van-cell__right-icon van-icon-arrow"></i>
      </router-link>
      <router-link :to="{name:'userOrder'}" class="van-cell van-hairline van-cell--clickable">
        <div class="van-cell__title"><span>购物订单</span></div>
        <i class="van-icon van-cell__right-icon van-icon-arrow"></i>
      </router-link>
    </div>

    <div class="van-cell-group user-container-group van-hairline--top-bottom">
      <router-link :to="{name:'register', query: {p_account: user.account}}" class="van-cell van-hairline van-cell--clickable">
        <div class="van-cell__title"><span>商户注册</span></div>
        <i class="van-icon van-cell__right-icon van-icon-arrow"></i>
      </router-link>

      <router-link :to="{name:'userWalletTransfer'}" class="van-cell van-hairline van-cell--clickable">
        <div class="van-cell__title"><span>票转账</span></div>
        <i class="van-icon van-cell__right-icon van-icon-arrow"></i>
      </router-link>

      <router-link :to="{name:'userTeam'}" class="van-cell van-hairline van-cell--clickable">
        <div class="van-cell__title"><span>我的分享人</span></div>
        <i class="van-icon van-cell__right-icon van-icon-arrow"></i>
      </router-link>

      <router-link :to="{name:'userMessage'}" class="van-cell van-hairline van-cell--clickable">
        <div class="van-cell__title"><span>留言</span></div>
        <i class="van-icon van-cell__right-icon van-icon-arrow"></i>
      </router-link>

      <a class="van-cell van-hairline van-cell--clickable user-view-group-cell-logout" @click="onClickLogout">
        <div class="van-cell__title"><span>退出</span></div>
        <i class="van-icon van-cell__right-icon van-icon-arrow"></i>
      </a>
    </div>
  </div>

  <div v-else="viewLoading" style="margin: 20% auto 0 auto; width: 13rem;">
    <div class="van-cell-group user-container-group van-hairline--top-bottom">
			<a class="van-cell van-hairline van-cell--clickable user-view-group-cell-logout" @click="onClickLogout">
				<div class="van-cell__title"><span>退出</span></div>
			</a>
		</div>
  </div>
</template>

<script>
import { Row, Col, Cell, CellGroup, Toast } from 'vant';
import ajaxVant from '../../utils/ajaxVant';
import auth from '../../utils/auth';

export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  },
  data() {
    return {
      viewLoading: false,
      user: {},
      userWallet: {}
    };
  },
  mounted() {
    this.getUserWallet();
  },
  methods: {
    getUserWallet() {
      var _this = this;
      auth.getToken().then(function(token) {
        ajaxVant.get('/user/wallet?token=' + token).then(function(data) {
          if (data !== false) {
            _this.user = data.user;
            _this.userWallet = data.user_wallet;
            _this.viewLoading = true;
          }
        });
      });
    },
    onClickLogout() {
      var _this = this;
      auth.removeToken().then(function() {
        Toast('退出成功');

        setTimeout(() => {
          Toast.clear();
          _this.$router.push({ name: 'homeIndex' });
        }, 1000);
      });
    }
  }
};
</script>

<style>
.user-view {
  background-color: #efefef;
  padding-bottom: 45px;
}
.user-view-info {
  height: 140px;
  background: #faaf20 url(../../assets/images/user-view-info-backgroup.png) no-repeat;
  background-size: cover;
}
.user-view-info > .user-container-poster {
  padding-top: 1.2rem;
  width: 4rem;
  height: 4rem;
  display: block;
  margin: 0 auto;
  border-radius:50%;
}
.user-container-group {
  margin-bottom: .3rem;
}
.user-container-links {
  background-color: #fff;
  padding: 5px 0;
  font-size: 12px;
  text-align: center;
  color: #000;
}
.user-container-links .van-col {
  width: 19.5%;
}
.user-container-links .van-col {
  border-right: solid 1px #d0d0d0;
}
.user-container-links .van-col:last-child {
  border-right: none;
}
.user-container-links .van-col span {
  color: #888;
  display: block;
}
.user-container-links .van-col div {
  color: #000;
}
.user-view-group-cell-logout {
  background-color: #faaf20;
  text-align: center;
}
</style>
